<template>
  <div class="main-footer" :class="{ 'lang-en': $i18n.locale === 'en' }">
    <div class="main-footer-warp">
      <div class="forus-list-wrap">
        <div class="forus-list">
          <div class="logo-box">
            <p>Rebirthealth</p>
            <p>{{ $t("有求必应,天下无疾") }}</p>
          </div>
          <div class="safe-box">
            <p>{{ $t("安全") }}</p>
            <p @click="openProtocol('/Rebirthealth 健康服务平台用户注册及服务协议（修订版）.html')">
              {{ $t("服务条款") }}
            </p>
            <p @click="openProtocol('/Rebirthealth 平台隐私保护政策（修订版）.html')">
              {{ $t("隐私安全") }}
            </p>
          </div>
          <div class="safe-box">
            <p>{{ $t("真实故事") }}</p>
            <p @click="$router.push('success')">{{ $t("成功案例") }}</p>
          </div>
          <div class="safe-box">
            <p>{{ $t("我们") }}</p>
            <p @click="$router.push('us')">{{ $t("关于我们") }}</p>
            <p @click="openDialog('email')">{{ $t("联系我们") }}</p>
            <p @click="openDialog('question')">{{ $t("常见问题") }}</p>
          </div>
        </div>
        <div class="sharethis-inline-share-buttons my-share-box"></div>
      </div>
      <div class="footer-line"></div>
      <div class="address-box">
        <p @click="openDialog">{{ $t("网站地图") }}</p>
        <p>
          <a @click="openProtocol('/Rebirthealth 健康服务平台用户注册及服务协议（修订版）.html')">{{ $t("服务条款") }}</a>&
          <a @click="openProtocol('/Rebirthealth 平台隐私保护政策（修订版）.html')">{{ $t("隐私安全") }}</a>
        </p>
        <p>
          {{ $t("备案号:")
          }}<a href="https://beian.miit.gov.cn/" target="_blank">{{
            $t("京ICP备2025132755号")
          }}</a>
        </p>
        <p>Copyright 2025 xxx</p>
      </div>
    </div>
    <serveDialog ref="serveDialog"></serveDialog>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
      <span>{{ title }}</span>
    </el-dialog>
    <el-dialog :title="$t('联系我们')" :visible.sync="emailDialog" width="30%">
      <div style="font-size: 1rem">
        {{ $t("我们的邮箱：") }}
        <p style="font-weight: bold">xul00771@gmail.com</p>
      </div>
    </el-dialog>
    <el-dialog :title="$t('常见问题')" :visible.sync="questionDialog" width="30%">
      <div style="font-size: 1rem">
        <a style="color: #339eff ;" target="blank"
          href="https://tb.53kf.com/code/client/1688aaad8d16abc7203c472cf00a96602/1">{{ $t("联系在线客服") }}</a>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "",
      dialogVisible: false,
      emailDialog: false,
      questionDialog: false,
    };
  },
  mounted() {
    setTimeout(() => {
      if (window.__sharethis__) {
        window.__sharethis__.initialize();
      }
    }, 100);
  },
  methods: {
    openDialog(e) {
      if (e === "email") {
        this.emailDialog = true;
      } else if (e === "question") {
        this.questionDialog = true;
      } else {
        this.dialogVisible = true;
        this.title = e.target.innerText;
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.main-footer {
  width: 100%;
  background: #050f19;
  height: 18.94rem;

  .main-footer-warp {
    width: 66.67rem;
    margin: 0 auto;
  }

  .forus-list-wrap {
    height: 16.28rem;
  }

  .forus-list {
    display: flex;

    .logo-box {
      margin-right: 6.39rem;
      margin-top: 3.17rem;
      margin-left: 1.11rem;

      p:nth-child(1) {
        font-size: 2.67rem;
        color: #ffffff;
        line-height: 4rem;
        letter-spacing: 3px;
      }

      p:nth-child(2) {
        font-size: 1.11rem !important;
        color: #d4d8dc;
        line-height: 2.67rem;
        letter-spacing: 2px;
        margin-top: -1rem;
      }
    }

    .safe-box {
      margin-right: 8rem;
      margin-top: 3.72rem;

      p {
        font-size: 0.67rem;
        color: #748ea6;
        margin-bottom: 0.67rem;

        &:nth-child(1) {
          font-weight: bold;
          font-size: 1rem;
          color: #ffffff;
          margin-bottom: 1.33rem;
        }
      }
    }
  }

  .footer-line {
    width: 66.67rem;
    height: 0rem;
    border: 0.03rem solid #293a49;
  }

  .address-box {
    display: flex;
    justify-content: space-between;
    padding: 0 1.11rem;
    margin-top: 0.89rem;

    p {
      font-size: 0.67rem;
      color: #748ea6;
    }

    a {
      font-size: 0.67rem;
      color: #748ea6;
    }
  }
}

.lang-en {
  &.main-footer .forus-list .logo-box p:nth-child(1) {
    background: linear-gradient(88.82066547067191deg,
        #0085ff 0%,
        #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: bold;
    font-size: 3.43rem;
    letter-spacing: 0;
  }
  &.main-footer .forus-list .logo-box p:nth-child(2) {
    font-size: 1rem;
  }
  &.main-footer .forus-list .safe-box p {
    color: #fff;
  }
}
</style>
